{% extends 'IcsocUIBundle::page.html.twig' %}

{% block content %}
    <div class="col-xs-12 col-sm-12 widget-container-col ui-sortable">
    <!-- #section:custom/widget-box -->
        <div class="widget-box">
            <div class="widget-header widget-header-flat" id="progress-head">
                <h4 class="widget-title">{{ 'loading...'|trans }}</h4><font id="state_rate" color="red" display="inline" >0%</font>
            </div>
            <div class="widget-body">
                <div class="widget-main">
                    <div id="process_rate" class="progress progress-striped pos-rel" data-percent="0%">
                        <div id="progress_bar" style="width: 0%;" class="progress-bar progress-bar-blue"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block footer %}
    {% javascripts
    '@bootbox_js'
    filter='uglifyjs'
    %}
    <script src="{{ asset_url }}"></script>
    {% endjavascripts %}

    <script type="text/javascript">
        var process = 0;
        var state = 0;
        $(document).ready(function(){
            get_process();

            $.ajax({
                url:'{{ path('icsoc_queue_upload_data',{'file':file}) }}',
                type :'POST',
                dataType:'json',
                success:function(response){
                    state = 1;
                    if (response.error==1) {
                        bootbox.dialog({
                            message: response.message,
                            title: "{{ 'error'|trans }}",
                            closeButton:false,
                            buttons: {
                                main: {
                                    label: "{{ 'return'|trans }}",
                                    className: "btn-primary",
                                    callback: function() {
                                        window.location.href='{{ path('icsoc_queue_batch') }}';
                                    }
                                },
                                success: {
                                    label: "{{ 'Returns to skills list'|trans }}",
                                    className: "btn-success",
                                    callback: function() {
                                        window.location.href='{{ path('icsoc_queue_index') }}';
                                    }
                                }
                            }
                        });

                    } else {
                        process = 100;
                        bootbox.dialog({
                            message: "{{ 'Batch import group success skills'|trans }}",
                            title: "{{ 'info'|trans }}",
                            closeButton:false,
                            buttons: {
                                success: {
                                    label: "{{ 'Returns to skills list'|trans }}",
                                    className: "btn-success",
                                    callback: function() {
                                        window.location.href='{{ path('icsoc_queue_index') }}';
                                    }
                                }
                            }
                        });
                    }
                }
            });
     });

        //动态加载进度条
        function get_process()
        {
            if(state==0)
            {
                process =parseInt(process)+1;
                if(process>=99)
                {
                    process=99;
                }
                $("#state_rate").remove();
                $("#progress-head").append('<font id="state_rate" color="red" display="inline" >'+process+'%</font>');
                $("#progress_bar").css("width",process+"%");
                document.getElementById("process_rate").setAttribute("data-percent",process+"%");
                setTimeout("get_process()", 50);
            }
            else
            {
                $("#state_rate").remove();
                $("#progress-head").append('<font id="state_rate" color="red" display="inline" >'+process+'%</font>');
                $("#progress_bar").css("width",process+"%");
                document.getElementById("process_rate").setAttribute("data-percent",process+"%");
            }
        }
    </script>
{% endblock %}